<template>
  <div class="waterMarker-container common-container yoyo-water-marker">
    <div class="waterMarker-content-container">
      <cloudsKit
        class="clouds-kit-use"
        cHeight="80px"
        cWidth="100%"
        cloudsNumbers="4"
        :cloudStyles="cloudStyles"
      />
      <div class="waterMarker-button-container">
        <div class="waterMarker-button partWaterMark" @click="setWaterMarker(1)">生成局部水印</div>
        <div class="waterMarker-button globalWaterMark" @click="setWaterMarker(2)">生成全局水印</div>
        <div class="waterMarker-button defaultColorWaterMark" @click="setWaterMarker(3)">生成默认颜色水印</div>
        <div class="waterMarker-button targetWaterMark">
          <el-input class="opacity-input" v-model="targetColor" placeholder="#e5f3fd"></el-input>
          <div class="targetColor-button" @click="setWaterMarker(4)">生成指定颜色水印</div>
        </div>
        <div class="waterMarker-button randColorWaterMark" @click="setWaterMarker(5)">生成随机颜色水印</div>
        <div class="waterMarker-button opacityWaterMark">
          <el-input class="opacity-input" v-model="opacityValue"></el-input>
          <div class="opacity-button" @click="setWaterMarker(6)">设置透明度</div>
        </div>
        <div class="waterMarker-button clearWaterMark" @click="setWaterMarker(7)">不显示水印</div>
      </div>
      <div class="waterMarker-config">
        <el-descriptions title="配置项 " :column="1" border class="descriptions">
          <el-descriptions-item label="content"> 水印内容，默认为 '小香菜今天吃什么' </el-descriptions-item>
          <el-descriptions-item label="container"> 水印容器，默认生成在 document.body 下面 </el-descriptions-item>
          <el-descriptions-item label="globalAlpha"> 设置图形和图像透明度的值，默认为 0.3 </el-descriptions-item>
          <el-descriptions-item label="height"> 水印高度，默认为 240，该值可调整水印的垂直间距 </el-descriptions-item>
          <el-descriptions-item label="width"> 水印宽度，默认为 100，该值可调整水印的水平间距 </el-descriptions-item>
          <el-descriptions-item label="fillStyle"> 水印颜色，默认为 '#000' </el-descriptions-item>
          <el-descriptions-item label="textAlign"> 文字对齐，默认为 'left' </el-descriptions-item>
          <el-descriptions-item label="textBaseline"> 基准线，默认为 'bottom' </el-descriptions-item>
          <el-descriptions-item label="rotate"> 文字旋转角度，默认为 '16' 计算方式为 (Math.PI * rotate) / 180 </el-descriptions-item>
          <el-descriptions-item label="iconStyle"> 图标的样式，默认样式为 { width: "1em", height: " 1em" } </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script>
import cloudsKit from '@/components/cloudsKit'
import watermark from '@/utils/waterMarker.js'
import { getColor } from '@/utils/index.js'
export default {
  name: 'index',
  components:{
    cloudsKit,
  },
  data(){
    return{
      cloudStyles:[
        { name: 'part-waterMark',
          style:{ top: '10px', left: '10px' }
        },
        { name: 'global-waterMark',
          style:{ top: '35px', left: '175px', transform: 'rotate(-6deg)' }
        },
        { name: 'defaultColor-waterMark',
          style:{ top: '-7px', left: '315px', transform: 'rotate(5deg)' }
        },
        { name: 'targetColor-waterMark',
          style:{ top: '43px', left: '530px' }
        },
        { name: 'randColor-waterMark',
          style:{ top: '-6px', left: '683px', transform: 'rotate(-8deg)' }
        },
        { name: 'opacity',
          style:{ top: '35px', left: '925px' }
        },
        { name: 'clear-waterMark',
          style:{ top: '0px', left: '1110px', transform: 'rotate(-3deg)' }
        },
      ],
      opacityValue: 0.2,
      selectType: 1,
      options: {
        rotate: -30,
        globalAlpha: 0.2,
      },
      targetColor: '',
      colorList: [],
    }
  },
  mounted () {
    this.getRandColor()
    this.$nextTick(() =>{
      this.setWaterMarker(1)
    })
  },
  methods:{
    // 随机生成三十种颜色
    getRandColor(){
      for (let i = 0; i < 30; i++) {
        this.colorList.push(getColor())
      }
    },
    // 生成随机数
    getRandom(start, end) {
      const differ = end - start
      const random = Math.random()
      return (start + differ * random).toFixed(0)
    },
    // 设置水印
    setWaterMarker(type){
      switch (type) {
        case 1:
          this.selectType = type
          this.options.container = document.getElementsByClassName('yoyo-water-marker')[0]
          watermark(this.options)
          return;
        case 2:
          this.selectType = type
          delete this.options.container
          watermark(this.options)
          return;
        case 3:
          this.options.fillStyle = '#000'
          watermark(this.options)
          return;
        case 4:
          this.options.fillStyle = this.targetColor
          watermark(this.options)
          return;
        case 5:
          this.options.fillStyle = this.colorList[this.getRandom(0, 30)]
          watermark(this.options)
          return;
        case 6:
          this.options.globalAlpha = this.opacityValue
          watermark(this.options)
          return;
        case 7:
          this.$nextTick(() => {
            const wm = document.getElementsByClassName('__yoyo__wm')[0]
            if (wm) {
              if(this.selectType===-1){
                wm.remove()
              }else {
                document.body.removeChild(wm)
              }
            }
          })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.waterMarker-content-container{
  border: 4px dashed #e5f3fd;
  height: 100%;
  width: 100%;
  position: relative;
}
.clouds-kit-use{
  position: absolute;
  z-index: 2;
}
.waterMarker-button-container{
  position: absolute;
  height: 110px;
  width: 100%;
  border-bottom: 4px dashed #e5f3fd;
  z-index: 3;
  display: flex;
}
.waterMarker-button-container:after{
  position: absolute;
  content: "";
  display: block;
  top: 100px;
  width: 100%;
  border-bottom: 4px dashed #e5f3fd;
}
.waterMarker-button{
  position: absolute;
  width: 150px;
  height: 40px;
  color: #4787d2;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
}
.partWaterMark{
  top: 13px;
  left: 10px;
}
.globalWaterMark{
  top: 36px;
  left: 175px;
}
.defaultColorWaterMark{
  top: -5px;
  left: 315px;
}
.targetWaterMark{
  top: 50px;
  left: 424px;
  width: 250px;
  display: flex;
}
.targetColor-button{
  margin-left: 24px;
}
.randColorWaterMark{
  top: -2px;
  left: 685px;
}
.opacityWaterMark{
  top: 40px;
  left: 820px;
  width: 240px;
  display: flex;
}
.opacity-button{
  margin-left: 45px;
}
.clearWaterMark{
  top: 5px;
  left: 1107px;
}
.waterMarker-config{
  margin-top: 140px;
}
</style>
<style lang="scss">
.opacity-input{
  width: 100px;
  .el-input__inner{
    width: 100px;
    height: 30px;
  }
}
.waterMarker-config{
  .el-descriptions{
    .el-descriptions__header{
      margin-bottom: 10px !important;
      .el-descriptions__title{
        font-weight: 600 !important;
        color: #4787d2 !important;
      }
    }
  }
}
</style>
